<template>
  <div :class="['about-video', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="line" v-if="!$ua.isFromPc()">
    </div>
    <div class="title">
      <div class="about-video-title">
        活动视频
      </div>
    </div>
    <div class="swiper-container" v-if="$ua.isFromPc()">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-no-swiping" v-for="(video, i) in videoList" :key="i">
          <client-only>
            <video-player
              :ref="('videoPlayer'+i)"
              :options="PlayerArry[i]"
              @ended="onPlayerEnded($event)"
              @play="onPlayerPlay($event,i)"
              :playsinline="true"
              class="video-player vjs-custom-skin" >
            </video-player>
          </client-only>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div v-else>
      <div class="about-video-list" v-if="!$ua.isFromPc()">
        <div class="content" v-for="(item, i) in videoList" :key="i">
          <client-only>
            <video-player
              :ref="('videoPlayer'+i)"
              :options="PlayerArry[i]"
              @ended="onPlayerEnded($event)"
              @play="onPlayerPlay($event,i)"
              :playsinline="true"
              class="video-player vjs-custom-skin" >
            </video-player>
          </client-only>
          <div class="work-info">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="art-name">
              {{ item.art_name }}
            </div>
            <div class="opus_material">
              {{ item.opus_material }}
            </div>
          </div>
        </div>
        <div class="look-more" @click="lookMore" v-if="!$ua.isFromPc()" v-show="this.videoList.length < this.videoTotal">
          查看更多
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper as SwiperClass, Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
  props: ['videoList', 'videoTotal'],
  data() {
    return {
      // videoList: [
      //   'http://221.12.172.138:9080/Upload/2021-08-31-02-37-00-1948960.mp4',
      //   'http://221.12.172.138:9080/Upload/2021-08-31-02-46-26-1950271.mp4',
      //   'http://221.12.172.138:9080/Upload/2021-08-31-02-50-09-1481353.mp4',
      //   'http://221.12.172.138:9080/Upload/2021-08-31-02-53-52-5856398.mp4',
      //   'http://221.12.172.138:9080/Upload/2021-08-31-03-11-12-2419444.mp4',
      //   'http://221.12.172.138:9080/Upload/2022-10-19-12-23-57-3591491.mp4'
      // ],
      VideoArry: [],//轮播视频数据
      VideoIndex: 0,//轮播索引
      PlayerArry: [],//视频轮播数据源参数集合
      playerOptions: {//video-player组件播放视频所需的参数，此参数作为模板用于复制
        controls: true, // 是否显示控制栏
        playbackRates: [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          // { type : "",src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'} //url地址
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,//视频画面宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,//当前时间和持续时间的分隔符
          durationDisplay: true,//显示持续时间
          remainingTimeDisplay: false,//是否显示剩余时间功能
          fullscreenToggle: true  //全屏按钮
        },
        playtimes: 0,//视频播放起点
        preload: "auto"
      },
      swiper: undefined,
      currentPlayer: null
    }
  },
  watch: {
    videoList() {
      this.GetVideoData()
    }
  },
  created() {

  },
  mounted() {
    console.log(this.videoList)
    this.GetVideoData()
    SwiperClass.use([Navigation, Pagination])
    this.swiper = new SwiperClass('.swiper-container', {
      slidesPerView: 'auto',
      // autoplay: true,
      observer: true,
      observeParents: true,
      paginationClickable: true,
      noSwiping: true,
      spaceBetween: 24,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        disabledClass: 'my-button-disabled'
      },
      on: {
        slideChange:(swiper) => {
          // console.log(this.$)
          this.VideoChange(swiper.activeIndex)
        }
      }
    })
    // this.swiper.slideChange()
  },
  methods: {
    lookMore() {
      this.$emit('artVideo')
    },
    VideoChange(value){//视频轮播索引改变时触发
      let _this = this;
      this.VideoArry.forEach(function(v,i){
        console.log('_this.$refs["videoPlayer"+i]', _this.$refs["videoPlayer"+i])
        if(i == value){
          //指定播放器跳转至视频开始重新播放。
          _this.$refs["videoPlayer"+i][0].player.currentTime(0);
          // _this.$refs["videoPlayer"+i][0].player.play();
        }else{
          _this.$refs["videoPlayer"+i][0].player.pause();
        }
      })
    },
    onPlayerEnded(obj){//播放完成后进行回调
      let oldValue = this.VideoIndex;
      this.VideoIndex = this.VideoIndex < (this.VideoArry.length - 1) ? this.VideoIndex + 1 : 0
      this.VideoChange(oldValue, this.VideoIndex);
    },
    onPlayerPlay(player, index) {
      if (this.currentPlayer){
        this.currentPlayer.pause()
        this.currentPlayer.currentTime(0)
      }
      this.currentPlayer = player
    },
    GetVideoData(){//加载轮播图和视频
      let _this = this;
      //加载轮播视频以及每个视频对应的播放参数
      let videoArry = this.videoList
      videoArry.forEach(function(v,i){
        let op = JSON.parse(JSON.stringify(_this.playerOptions));
        op.sources = [{ type : "video/mp4" ,src: v }];
        _this.PlayerArry.push(op);
      });
      _this.VideoArry = videoArry;
      // setTimeout(function(){
      //   _this.$refs["videoPlayer"+_this.VideoIndex][0].player.play();
      // },1000);
    }
  }
}
</script>

<style lang="less" scoped>
.about-video {
  &.z-web {
    padding: 0 279px 190px;
    background: #fff;
    --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
    --swiper-navigation-color: #000;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;/* 设置按钮大小 */
    position: relative;

    .about-video-title {
      position: absolute;
      left: 173px;
      font-size: 44px;
      font-weight: 600;
      color: #000;
      margin-top: 5px;
    }

    ::v-deep(.swiper-button-next) {
      width: 100px;
      height: 100px;
      display: flex !important;
      background-color: #000;
      opacity: 0.3;
      justify-content: center;
      border-radius: 50%;
      top: 220px;
      right: 0;
      margin-top: -50px;
    }

    ::v-deep(.swiper-button-prev) {
      width: 100px;
      height: 100px;
      top: 220px;
      border-radius: 50%;
      display: flex !important;
      justify-content: center;
      background-color: #000;
      opacity: 0.3;
      // top: 50%;
      left: 0;
      margin-top: -50px;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
      color: #fff;
    }

    .swiper-wrapper {
      min-height: 448px;
    }

    ::v-deep(.swiper-slide) {
      width: 672px;
      height: 448px;
      // margin-right: 24px;

      &:last-child {
        margin-right: 0;
      }
    }

    ::v-deep(.vjs-custom-skin > .video-js) {
      height: 100%;
    }

    .video-player {
      width: 100%;
      height: 100%;
    }

    ::v-deep(.vjs-custom-skin > .video-js .vjs-big-play-button) {
      width: 120px;
      height: 120px !important;
      border-radius: 50%;
      border: 1px solid transparent;
      opacity: 0.7;
    }

    ::v-deep(.video-js .vjs-big-play-button .vjs-icon-placeholder:before) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &.z-phone {
    padding: pxtorem(40) pxtorem(24) 0;
    .title {
      .about-video-title {
        font-size: pxtorem(36);
        font-weight: 600;
        color: #000000;
        letter-spacing: pxtorem(10);
        writing-mode: lr;
      }
    }

    .famous-list {
      .content {
        display: flex;
        margin-bottom: pxtorem(40);

        .video-player {
          width: pxtorem(300);
          height: pxtorem(200);

          ::v-deep(.vjs-custom-skin > .video-js) {
            height: 100%;
          }
        }

        .work-info {
          margin-left: pxtorem(32);
          vertical-align: top;

          .name {
            font-size: pxtorem(22);
            font-weight: bold;
            color: #000;
            margin: pxtorem(24) 0 pxtorem(43);
          }

          .art-name {
            font-size: pxtorem(22);
            font-weight: bold;
            color: #999999;
            margin-bottom: pxtorem(15);
          }
        }
      }
    }
  }
}
</style>